<template>
	<view class="verification-borrow-money">
		<view class="center-list" >
			<view class="center-item" v-for="(item,index) in centerList" :key="index">
			<view class="item-left">
				<text class="title">{{item.title}}</text>
				<text v-if="index===active" class="detail active" >{{item.detail}}</text>
				<text v-else class="detail" >{{item.detail}}</text>
			</view>
			<navigator url="./verificationBorrowMoneyDetail">
			<view class="item-right">
				<view>¥{{item.money}}</view>
				<icon-svg icon-class="icon-test7"/>
			</view>
			</navigator>
		 </view>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return{
			active:0,
			centerList:[
				{title:'出差借款',detail:'超时43天',money:'10,000.00'},
				{title:'测试11',detail:'2021年01月25日',money:'297.00'},
				{title:'差旅费申请',detail:'无还款期限',money:'300.00'},
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.verification-borrow-money{
	margin: 20rpx;
	background: #fff;
	.center-list{
		 background: #fff;
		.center-item{
		  display: flex;
		  justify-content: space-between;
		  padding:20rpx 10rpx;
		  border-bottom:1px solid #F9FAF9;
		   .item-left{
			  margin-left: 20rpx;
			  text{
			  	display: block;
			  }
			  .detail{
				  color:#bbb;
				  font-size: 32rpx;
				  margin-top: 10rpx;
			  }
			  .active{
				color:#F49E9E; 
			  }
		   }
		  .item-right{
			text-align: right;
			display: flex;
			.svg-icon{
			color: #D1D6D9;
			margin: 10rpx;
			}
		  }
		}
	}
}	
</style>
